<template>
    <div>
        <div class="sooncome">
            <span>即将上映</span>
        </div>
        <ul class="soonbox">
            <li v-for="item in soonList">
                <router-link :to="{name: 'detail', params: {'id': item.id}}">
                    <img :src="item.cover.origin" alt="">
                    <div class="soondetail">
                        <div class="sdt-left">
                            <p class="sdt-title">{{item.name}}</p>
                        </div>
                        <div class="sdt-right">{{item.premiereAt | formatDate}}</div>
                    </div>
                </router-link>
            </li>
        </ul>
        <div class="morem">更多即将上映电影</div>
    </div>
</template>

<script>
    import $ from 'jquery';

    export default {
        data: function() {
            return {
                soonList: []
            }
        },
        filters: {
            'formatDate': function(val) {
                var time = new Date(val);
                var m = time.getMonth() + 1;
                var d = time.getDate();
                return m + '月' + d + '日上映';
            }
        },
        mounted: function() {

            var url = 'http://localhost:3000/coming-soon?time=' + new Date().getTime();
            var that = this;
            $.get(url, function(res) {
                that.soonList = res.data.films

                setTimeout(function() {
                    that.$parent.isMark = false;
                }, 100)
            })
        }
    }    
</script>